<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

    <title>找房无忧-首页</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<!--头部-->
<header>
    <h1><a href="#"><img src="image/index/logo.jpg" alt=""/></a></h1>

    <div class="icon">
        <a href="#"><img src="image/index/my.jpg" alt=""/></a>
        <a href="#"><img src="image/index/xiazai.jpg" alt=""/></a>
    </div>
</header>
<!--大图-->
<section class="banner">
    <form action="#">
        <span class="icon"></span>
        <input class="search" type="search" placeholder="输入小区或商圈名开始找房咯！"/>
    </form>
</section>
<!--导航-->
<section class="navList">
    <nav>
        <ul>
            <li><a href="#">二手房</a></li>
            <li><a href="#">新房</a></li>
            <li><a href="#">租房</a></li>
            <li><a href="#">卖房</a></li>
        </ul>
    </nav>
</section>

<section class="banner2">
    <img src="image/index/banner2.png" alt=""/>
</section>
<!--热门房源-->
<section class="hotHouse">
    <h2>
        <strong>热门房源</strong><br/>
        <span> Hot house</span>
    </h2>
    <ul class="houseList">
        <li>
            <div class="img"><img src="image/index/img1.jpg" alt=""/></div>
            <div class="text">
                <h3>文化部中间层 一层带阁楼</h3>
                <p>2室1厅96㎡南北 <strong>1105万</strong></p>
                <p>红庙北里 <span>14268元/平</span></p>
                <p>
                    <a href="#">学区房</a>
                    <a href="#">独家</a>
                </p>
            </div>
        </li>
        <li>
            <div class="img"><img src="image/index/img2.png" alt=""/></div>
            <div class="text">
                <h3>光大水墨 精装复式 稀缺</h3>
                <p>2室1厅96㎡南北 <strong>280万</strong></p>
                <p>光大水墨 <span>14268元/平</span></p>
                <p>
                    <a href="#">学区房</a>
                    <a href="#">独家</a>
                    <a href="#">满五唯一</a>
                </p>
            </div>
        </li>
        <li>
            <div class="img"><img src="image/index/img3.png" alt=""/></div>
            <div class="text">
                <h3>南北通透两居 精装修 无</h3>
                <p>2室1厅96㎡南北 <strong>320万</strong></p>
                <p>北京新天地 <span>14268元/平</span></p>
                <p>
                    <a href="#">地铁房</a>
                    <a href="#">独家</a>
                </p>
            </div>
        </li>
    </ul>


</section>

<!--热门关注、友情链接-->
<section class="hotAttention">
    <ul class="title">
        <li class="active"><a href="#">热门关注</a></li>
        <li><a href="#">友情链接</a></li>
    </ul>
    <div class="content">
        <ul>
            <li><a href="#">北京二手房</a></li>
            <li><a href="#">北京二手房价</a></li>
            <li><a href="#">海淀日租房</a></li>
            <li><a href="#">朝阳新房</a></li>
        </ul>
        <ul>
            <li><a href="#">北京找房无忧</a></li>
            <li><a href="#">青年家园</a></li>
            <li><a href="#">免税房源</a></li>
            <li><a href="#">满五年唯一免税</a></li>
        </ul>
    </div>


</section>

<!--版权底部-->
<footer class="copyright">
    <h2>北京找房无忧 > 首页</h2>
    <div class="content">
        <ul>
            <li>
                <img src="image/index/apple.png" alt=""/>
                <div>
                    <p>iPhone</p>
                    <p>客户端</p>
                </div>
            </li>
            <li>
                <img src="image/index/android.png" alt=""/>
                <div>
                    <p>Android</p>
                    <p>客户端</p>
                </div>
            </li>
        </ul>
        <div class="text">
            <p>北京找房无忧房地产经纪公司</p>
            <p>网络经营许可证京ICP备20160812号</p>
        </div>
    </div>
</footer>
<!--下载透明层-->
<section id="download" class='download'>
    <img id="close" class="close" src="image/index/close.png" alt=""/>
    <div class="downLft">
        <div class="icon">
            <img src="image/index/download.png" alt=""/>
        </div>
        <div class="text">
            <p>找房无忧</p>
            <p>市场行情，一手掌握！</p>
        </div>
    </div>
    <div class="downRight">
        <a href="#">免费下载</a>
    </div>

</section>


<script src="js/rem.js"></script>
<script>
    var close = document.getElementById('close');
    var download = document.getElementById('download');
    close.onclick = function(){
        download.style.display = 'none';
    }
</script>
</body>
</html>